<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>紫色鹭</title>
    <link rel="stylesheet" href="../css/swiper.min.css">
    <link rel="stylesheet" href="../layui/css/layui.css"/>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/style.css">

</head>
<body>
<div id="header_01_html">
    <iframe id="header_01" src="head_01.html" frameborder="0"></iframe>
</div>
<div id="head_store_html">
    <iframe id="head_store" src="head_store.html" frameborder="0"></iframe>
</div>
<div class="tabRight">
    <div class="first">
        <ul>
            <li><a target="_blank" class="icon_admin_white" title=""></a></li>
            <li>
                <a target="_blank" class="go-shopcard">
                    <i class="icon_shopcar_white"></i>
                    <p class="mt10">购<br>物<br>车</p>
                    <span class="car-num pos-Sty1">0</span>

                </a>
            </li>
            <li>
                <a target="_blank" class="icon_list_white mt10 go-myorder" title="订单"></a>
                <a target="_blank" class="icon_collect_white mt10 go-myhas" title="收藏"></a>
                <a target="_blank" class="icon_history_white mt10 go-record" title="记录"></a>
            </li>
        </ul>
    </div>
    <div class="second">
        <a target="_blank" class="icon_edit_white"></a>
        <a target="_blank" class="icon_top_white mt10"></a>
    </div>
</div>
<div class="store container" v-cloak>
    <div class="store_content">
        <div class="store_leftbox">
            <div class="describe_box">
                <div class="name">{{storeName}}</div>
                <!--<div class="discrite">-->
                <!--<ul>-->
                <!--<li>描述相符 <span class="c_red marl_5">5.0</span> <i class="icon_up_red"></i> 高于同行</li>-->
                <!--<li>发货速度 <span class="c_red marl_5">5.0</span> <i class="icon_up_red"></i> 高于同行</li>-->
                <!--<li>服务态度 <span class="c_red marl_5">5.0</span> <i class="icon_up_red"></i> 高于同行</li>-->
                <!--</ul>-->
                <!--</div>-->
                <div class="adress">
                    <a class="QQ qq-sty1" target="_blank" :href="'http://wpa.qq.com/msgrd?v=3&uin='+QQ+'&site=qq&menu=yes'">
                        <img src="../img/QQ.png" class="qq-box1" align="absmiddle">
                    </a>
                    <p v-if="storeNam">公司名称：{{storeNam}}</p>
                    <p>所在地址：{{area}}</p>
                    <p>联系电话：{{storePhone}}</p>
                </div>
                <div class="button_box">
                    <!--<div>进入店铺</div>-->
                    <div @click="collect(storeInfo.id)" v-if="storeInfo.focus != 1">关注店铺</div>
                    <div @click="unCollect(storeInfo.id)" v-else>已关注</div>
                </div>
            </div>
            <div class="box search">
                <div class="title">店内搜索</div>
                <div class="content">
                    <ul>
                        <li><label>关键字</label><input type="text" id="name"></li>
                        <li><label>价格</label>
                            <input type="text" class="short" id="startPrice">
                            &nbsp;&nbsp;-&nbsp;&nbsp;
                            <input type="text" class="short" id="endPrice"></li>
                        <li><label></label>
                            <div class="submit" @click="toSearch"><i class="icon_search"></i></div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="box class">
                <div class="title">店内分类</div>
                <template v-for="items in storeTypeList">
                    <div class="type"><i class="icon_open"></i><span @click="change_type(items.name)">{{items.name}}</span></div>
                    <ul>
                        <li v-for="item in items.subordinate" @click="change_type(item.name)">{{item.name}}</li>
                    </ul>
                </template>
            </div>
            <!--<div class="box sell">-->
            <!--<div class="title">热门销售</div>-->
            <!--<div class="thing" v-for="item in advertise" @click="jumpDetail(item.id)">-->
            <!--<img v-for="(it,index) in item.picUrl" :src="imgBaseUrl + it" v-if="index == 0" alt="">-->
            <!--<p>{{item.name}}</p>-->
            <!--<div class="text"><span class="c_red">¥{{item.price}}</span></div>-->
            <!--</div>-->
            <!--</div>-->
            <div class="advice">
                <ul>
                    <li v-for="item in advertise" @click="jumpDetail(item.id)">
                        <img v-for="(it,index) in item.picUrl" :src="imgBaseUrl + it" v-if="index == 0" alt="">
                        <div class="price">¥{{item.price}}</div>
                        <p>{{item.name}}</p>
                        <label>广告</label>
                    </li>
                </ul>
            </div>
        </div>
        <div class="right">
            <div class="list">
                <div class="title">企业简介</div>
                <div class="box clearfix">
                    <div><img :src="imgBaseUrl + enterImg" alt="" style="width: 100%;height: 300px"></div>
                    <div class="pb_15" v-html="enterContent" style="padding-top: 15px"></div>
                </div>
            </div>
            <!--<div class="list" v-for="(value,key) in productList" v-if="value.length > 0">-->
                <!--<div class="title">{{key}}</div>-->
                <!--<div class="box clearfix">-->
                    <!--<div class="product_box" v-for="item in value" @click="jumpDetail(item.id)">-->
                        <!--<img v-for="(it,index) in item.picUrl" v-if="index == 0" class="img" :src="imgBaseUrl + it" alt="">-->
                        <!--<div class="name">{{item.name}}</div>-->
                        <!--<div class="price">¥ {{item.price}}</div>-->
                    <!--</div>-->
                <!--</div>-->
            <!--</div>-->
            <div id="test1"></div>
        </div>
    </div>

</div>

<script src="../js/config.js"></script>
<script src="../js/swiper.min.js"></script>
<script>
    $("body").on("click", ".store_leftbox .left .class .type", function () {
        $(this).next().slideToggle().siblings("ul").slideUp();
    })

    var limit = 12;
    var offset = 1;
    var count;

    var storeId = getUrlParam('storeid');
    var app = new Vue({
        el: '.store',
        data: {
            imgBaseUrl: imgBaseUrl,
            storeNam: '',
            storePhone: '',
            area: '',
            storeInfo: '',
            storeName: '',
            QQ:'',
            storeTypeList: [],
            storeType: '',
            productList: {},
            name: '',
            storeId: storeId,
            startPrice: '',
            endPrice: '',
            advertise:'',
            enterContent:'',
            enterImg:'',
        },
        beforeCreate:function () {

        },
        mounted: function () {
            var that = this;
            //企业简介
            get_ajax("cms/getAllNewPage", {storeId:storeId,type:2,offset:1,limit:10}, function (data) {

                console.log(data[0]);
                that.enterContent = data[0].content;
                var picArr = data[0].picUrl.split(',')[0];
                that.enterImg = picArr;


            })

            _this = this;
            get_ajax("/sys/store/view", {id: storeId}, function (data) {
                console.log(data);
                _this.storeInfo = data;
                _this.storeNam = data.entName;
                _this.storePhone = data.phone;
                _this.area = data.area;
                _this.storeName = data.name;
                _this.QQ = data.qq;
            });
            get_ajax("/sys/storeCommodityType/getStoreType", {storeId: storeId}, function (data) {
                _this.storeTypeList = data;
                get_product();
            });
            get_ajax("/sys/storeCommodity/getAdvertisement", {limit:4}, function (data) {
                data.forEach(function (item) {
                    item.picUrl = item.picUrl.split(",");
                })
                _this.advertise = data;
            });
        },
        methods: {
            collect: function (storeId) {
                if(hasToken()){
                    get_ajax("/sys/follow/saveFollow", {storeId: storeId}, function (data) {
                        layer.msg("关注成功!");
                        app.storeInfo.focus = 1;
                    })
                }
            },
            unCollect: function (storeId) {
                if(hasToken()){
                    get_ajax("/sys/follow/delFollow", {id: storeId}, function (data) {
                        layer.msg("取消关注成功!");
                        app.storeInfo.focus = 0;
                    })
                }
            },
            change_type:function(storeType){
                this.storeType = storeType;
                this.productList = {};
                get_product();
            },
            toSearch:function () {
                this.name = $("#name").val();
                this.startPrice = $("#startPrice").val();
                this.endPrice = $("#endPrice").val();
                this.productList = {};
                get_product();
            },
            jumpDetail:function(id){
                location.href = 'product_detail.html?productid='+id
            }
        },
        updated: function () {
            var swiper = new Swiper('.swiper-container', {
                autoplay:true,
                loop: true,
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
            });
        }

    })



    $("body").on("click", ".store_leftbox .class .type .icon_open", function () {
        $(this).parent().next().slideToggle().siblings("ul").slideUp();
    })
    //参数处理
    function get_product() {
        if (app.storeType) {
            var sendData = {
                limit:limit,offset:offset,type:app.storeType,name:app.name,
                storeId:app.storeId,startPrice: app.startPrice, endPrice: app.endPrice
            }
            product_ajax(sendData);
        } else {
            app.storeTypeList.forEach(function (item) {
                var sendData = {
                    limit:8,offset:1,type:item.name,name:app.name,storeId:app.storeId,
                    startPrice: app.startPrice,endPrice:app.endPrice
                }
                product_ajax(sendData);
            })
        }
    }

    //获取数据
    function product_ajax(sendData) {
        if(app.storeType){
            get_ajaxPage("/sys/storeCommodity/getPage", sendData, function (data) {
                data.data.forEach(function (it) {
                    it.picUrl = it.picUrl.split(",");
                })
                Vue.set(app.productList,sendData.type,data.data);
                count = data.count;
                initPage()
            })
        }else{
            ajax_async("/sys/storeCommodity/getPage", sendData, function (data) {
                data.forEach(function (it) {
                    it.picUrl = it.picUrl.split(",");
                })
                Vue.set(app.productList,sendData.type,data);
            })
        }

    }

    function initPage(sendData) {
        layui.use('laypage', function(){
            var laypage = layui.laypage;
            //执行一个laypage实例
            laypage.render({
                elem: 'test1' //注意，这里的 test1 是 ID，不用加 # 号
                ,count: count //数据总数，从服务端得到
                ,limit:limit
                ,jump: function(obj, first){
                    //obj包含了当前分页的所有参数，比如：
                    console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                    console.log(obj.limit); //得到每页显示的条数
                    //首次不执行
                    if(!first){
                        offset = obj.curr;
                        var sendData = {
                            limit:limit,offset:offset,type:app.storeType,name:app.name,
                            storeId:app.storeId,startPrice: app.startPrice, endPrice: app.endPrice
                        }
                        get_ajaxPage("/sys/storeCommodity/getPage",sendData, function (data) {
                            data.data.forEach(function (item) {
                                item.picUrl = item.picUrl.split(",");
                            })
                            Vue.set(app.productList,sendData.type,data.data);
                            count = data.count;
                        })
                    }
                }
            });
        });
    }

    $(document).on('click','.js-storeHome',function(){
        window.location.href='store.html?storeid='+storeId;
    })
    $(document).on('click','.js-enterIntro',function(){
        window.location.href='enter_intro.html?storeid='+storeId;
    })
    $(document).on('click','.js-enterInfo',function(){
        window.location.href='enter_Dt.html?storeid='+storeId;
    })
    $(document).on('click','.js-enterRy',function(){
        window.location.href='enter_zz.html?storeid='+storeId;
    })

</script>
</body>
</html>